<template>
  <!-- 加载动画 -->
  <LoadingSpinner v-if="isLoading" />

  <el-config-provider :locale="zhCn" :message="config">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" v-if="!isLoading" />
      </transition>
    </router-view>
  </el-config-provider>
</template>
<script>
import {defineComponent, ref} from "vue";
import LoadingSpinner from "@/components/LoadingSpinner.vue";
import {zhCn} from "element-plus/es/locale/index";

const config = ref({
  max:4,
});

export default defineComponent({
  name: "App",
  components: {LoadingSpinner},
  setup() {
    return {zhCn,config}
  },
})
</script>
<script setup>
import {defineComponent, onMounted, ref} from "vue";
import {zhCn} from "element-plus/es/locale/index";

const isLoading = ref(true);

onMounted(() => {
  setTimeout(() => {
    isLoading.value = false;
  }, 1500);
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
}
#app {
  font-family: 'Microsoft YaHei', sans-serif;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
